<template>
  <div class="sale">
    <!-- header -->
    <div class="header">
      <div class="left">
        <el-tabs v-model="activeName" @tab-click="handleClick">
          <el-tab-pane label="销售额" name="first"> </el-tab-pane>
          <el-tab-pane label="访问量" name="second"> </el-tab-pane>
          <!-- <div class="main_right">sale rank</div> -->
        </el-tabs>
      </div>

      <div class="right">
        <span @click="setDay">今日</span>
        <span @click="setWeek">本周</span>
        <span @click="setMonth">本月</span>
        <span @click="setYear">本年</span>

        <!-- 时间选择 -->
        <el-date-picker
          v-model="timeValue"
          type="daterange"
          range-separator="-"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          size="mini"
          value-format="yyyy-MM-dd"
        >
        </el-date-picker>
      </div>
    </div>
    <!-- main -->
    <el-row :gutter="8">
      <!-- 左侧图表 -->
      <el-col :span="16">
        <div class="chart" ref="chart"></div>
      </el-col>
      <!-- 右侧排名 -->
      <el-col :span="8">
        <div class="span">{{ titleRight }}</div>
        <!-- rank item -->

        <div class="rank">
          <div class="rank-left">
            <div class="rank-num rank-num-active">1</div>
            <div class="rank-text">肯德基</div>
          </div>
          <div class="rank-right">323234</div>
        </div>
        <div class="rank">
          <div class="rank-left">
            <div class="rank-num rank-num-active">2</div>
            <div class="rank-text">汉堡王</div>
          </div>
          <div class="rank-right">323234</div>
        </div>
        <div class="rank">
          <div class="rank-left">
            <div class="rank-num rank-num-active">3</div>
            <div class="rank-text">真功夫</div>
          </div>
          <div class="rank-right">323234</div>
        </div>
        <div class="rank">
          <div class="rank-left">
            <div class="rank-num">4</div>
            <div class="rank-text">麦当劳</div>
          </div>
          <div class="rank-right">323234</div>
        </div>
        <div class="rank">
          <div class="rank-left">
            <div class="rank-num">5</div>
            <div class="rank-text">海底捞</div>
          </div>
          <div class="rank-right">323234</div>
        </div>
        <div class="rank">
          <div class="rank-left">
            <div class="rank-num">6</div>
            <div class="rank-text">火锅底料</div>
          </div>
          <div class="rank-right">323234</div>
        </div>
        <div class="rank">
          <div class="rank-left">
            <div class="rank-num">7</div>
            <div class="rank-text">西贝</div>
          </div>
          <div class="rank-right">323234</div>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import * as echarts from "echarts";
import dayjs from "dayjs";
export default {
  data() {
    return {
      activeName: "first",
      myChart: {},
      timeValue: [],
    };
  },
  mounted() {
    this.initChart();
  },
  computed: {
    titleRight() {
      return this.activeName == "first" ? "销售额趋势" : "访问量排名";
    },
    titleChart() {
      return this.activeName == "first" ? "销售额" : "访问量";
    },
  },

  methods: {
    handleClick() {
      this.updateChart();
      console.log(this.timeValue);
    },

    initChart() {
      var chartDom = this.$refs.chart;
      this.myChart = echarts.init(chartDom);
      let option;

      option = {
        title: {
          text: "销售额排名",
        },
        xAxis: {
          type: "category",
          data: [
            "一月",
            "二月",
            "三月",
            "四月",
            "五月",
            "六月",
            "七月",
            "八月",
            "九月",
            "十一月",
            "十二月",
          ],
        },
        yAxis: {
          type: "value",
          max: 250,
        },
        series: [
          {
            data: [120, 200, 150, 80, 70, 110, 133, 120, 130, 110, 135],
            type: "bar",
            showBackground: true,
            backgroundStyle: {
              color: "rgba(180, 180, 180, 0.2)",
            },
            color: "cornflowerblue",
          },
        ],
      };

      option && this.myChart.setOption(option);
    },
    updateChart() {
      let option = {
        title: {
          text: this.titleChart,
        },
      };
      this.myChart.setOption(option);
    },

    setDay() {
      const day = dayjs().format("YYYY-MM-DD");
      this.timeValue = [day, day];
    },
    setWeek() {
      const start = dayjs().day(1).format("YYYY-MM-DD");
      const end = dayjs().day(7).format("YYYY-MM-DD");
      this.timeValue = [start, end];
    },
    setMonth() {
      const start = dayjs().startOf("month").format("YYYY-MM-DD");
      const end = dayjs().endOf("month").format("YYYY-MM-DD");
      this.timeValue = [start, end];
    },
    setYear() {
      const start = dayjs().startOf("year").format("YYYY-MM-DD");
      const end = dayjs().endOf("year").format("YYYY-MM-DD");
      this.timeValue = [start, end];
    },
  },
};
</script>

<style lang="less" scoped>
.left {
  width: 100%;
}
.header {
  display: flex;
  justify-content: space-between;
  position: relative;
}
.right {
  position: absolute;
  right: 0px;
}
span {
  margin-right: 10px;
}
.chart {
  height: 300px;
}

.span {
  font-size: 17px;
  font-weight: bold;
}

.rank {
  margin-top: 10px;
  display: flex;
  justify-content: space-between;
  .rank-left {
    width: 50%;
    display: flex;
    .rank-num {
      width: 20px;
      height: 20px;
      background-color: #fff;
      color: #000;
      border-radius: 50%;
      text-align: center;
      margin-right: 20px;
    }
    .rank-num-active {
      background-color: black;
      color: #fff;
    }
    .rank-text {
      width: 70%;
    }
  }
  .rank-right {
    width: 50%;
    text-align: right;
    padding-right: 15px;
  }
}

//  <div class="rank">
//             <div class="rank-left">
//                 <div class="rank-num"></div>
//                 <div class="rank-text"></div>
//             </div>
//             <div class="rank-right"></div>
//         </div>
</style>